<template>
  <view class="type">
    <view class="navbar">
      <uni-nav-bar fixed="true" border="false" color="#FFF" statusBar="true" backgroundColor="#22b9a3" title="所有服务" />
    </view>
    <view class="container">
      <!-- 左侧分类 -->
      <view class="categories">
        <view :class="[selectedType==project.id ? 'category-item-active' : '', 'category-item']"
          v-for="(project, index) in projectList" :key="project.id" @click="selectProject(project.id)">
          <view class="name">
            {{ project.name }}
          </view>
        </view>
      </view>
      <!-- 右侧商品列表 -->
      <scroll-view class="products" scroll-y="true">
        <view @click="gotoPropgram(program.id)" class="product-item" v-for="(program, index) in filteredProgram"
          :key="program.id">
          <view class="product-image">
            <image :src="program.icon" mode="aspectFill"></image>
          </view>
          <view class="product-info">
            <view class="product-name">{{ program.name }}</view>
            <view class="price-info">
              <text class="current-price">￥{{ ( program.price/100).toFixed(2)  }}</text>
              <text class="original-price">原价：￥{{ ( program.originalPrice/100).toFixed(2)  }}</text>
            </view>
            <view class="product-description">{{ program.recommend }}</view>
            <view class="product-tags" v-if=" program.label">
              <text v-for="(tag, index) in program.label.split(',')" :key="index" class="tag">{{ tag }}</text>
              <view class="buy-button">立即预约</view>
            </view>

          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    uselocation
  } from '@/stores/location.js';
  import {
    ref,
    reactive,
    computed,
    onMounted
  } from 'vue';
  //获取服务类型
  const projectList = ref([])

  const location = uselocation()
  //获取服务
  const programList = ref([])
  onMounted(async () => {
    //获取产品分类
    const result = await http.getRequest("/peizhen/project/list")
    if (result.code == 0) {
      projectList.value = result.data
    } else {
      uni.showToast({
        title: '获取服务失败',
        icon: 'error',
        duration: 1000
      })
    }
    const programResult = await http.getRequest("/peizhen/open-city/program/list", {
      // cityCode: location.locationInfo.id,
      cityCode: 410100
    })
    if (programResult.code == 0) {
      programList.value = programResult.data
    } else {
      uni.showToast({
        title: '获取服务失败',
        icon: 'error',
        duration: 1000
      })
    }
  })

  // 默认选中的分类   
  const selectedType = ref(1);

  function selectProject(typeValue) {
    selectedType.value = typeValue;
  }

  const filteredProgram = computed(() => {
    return programList.value.filter(program => program.projectId === selectedType.value);
  });

  //点击跳转到详情
  function gotoPropgram(programId) {
    uni.navigateTo({
      url: `/pages/project/program/program?programId=${programId}`
    })
  }
</script>

<style lang="scss" scoped>
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .type {
    background-color: $uni-bg-color-grey;
  }

  .container {
    display: flex;
    padding: 22rpx;
    border-radius: 10rpx;
  }

  .categories {
    width: 173rpx;
    background-color: #fff;
    height: 100vh;
  }

  .category-item {
    cursor: pointer;

    .name {
      height: 87rpx;
      line-height: 87rpx;
      font-family: SourceHanSansSC-Regular;
      font-size: 28rpx;
      text-align: center;
      color: #858685;

    }
  }

  .category-item-active {
    border-left: 7rpx solid #22b9a3;

    .name {
      color: #22b9a3;
    }
  }

  .product-item {
    display: flex;
    align-items: center;
    margin-bottom: 25.5rpx;
    padding: 17rpx;
    border: 1px solid #eee;
    border-radius: 9rpx;
    background-color: #fff;
  }

  .product-image {
    width: 170rpx;
    height: 170rpx;
    margin-right: 25.5rpx;
  }

  .product-image image {
    width: 100%;
    height: 100%;
  }

  .product-info {
    flex: 1;

  }

  .product-name {
    font-size: 27.2rpx;
    font-weight: bold;
    margin-bottom: 9px;
  }

  .price-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
  }

  .current-price {
    color: #ff4500;
    /* 红色突出显示当前价格 */
    font-size: 24rpx;
    font-weight: bold;
  }

  .original-price {
    color: #999;
    text-decoration: line-through;
    font-size: 20.4rpx;
  }

  .product-description {
    font-size: 26rpx;
    color: #666;
  }

  .product-tags {
    position: relative;
  }

  .product-tags .tag {
    margin-top: 10rpx;
    display: inline-block;
    background-color: #f0f0f0;
    color: #333;
    padding: 4rpx 9rpx;
    margin-right: 9rpx;
    border-radius: 5rpx;
    font-size: 20rpx;
  }

  .buy-button {
    position: absolute;
    right: 5rpx;
    display: inline-block;
    width: 130rpx;
    height: 50rpx;
    line-height: 50rpx;
    background-color: #24c373;
    border-radius: 30rpx;
    font-size: 25rpx;
    color: #fff;
    letter-spacing: 3.5rpx;
    text-align: center;

  }
</style>